<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专业技能</title>
    <link rel="stylesheet" href="css/tongyong.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header clearfix">
    <div class="logo clearfix">
        <div class="header-img">
            <img src="img/2.jpg" alt="">
        </div>
        <div class="header-p">
            <span class="pt">Zhao yu hang</span>
            <span class="pb">个人主页</span>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li>
                <a href="index.html">
                    <span>首页</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="about.html">
                    <span>关于我</span>
                    <i></i>
                </a>
            </li>
            <li class="cur">
                <a href="skills.html">
                    <span>专业技能</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>我的简介</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="profile.html">
                    <span>作品展示</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>博客</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>联系我</span>
                    <i></i>
                </a>
            </li>
        </ul>
    </div>
</header>
<div class="main-me">
    <div class="naber-2">
        <div class="sub-page">
            <div class="title">
                <h3>专业技能</h3>
                <i class="line"></i>
                <span class="en-title">- ABOUT ME -</span>
            </div>
            <div class='skill-info'>
                <p>IT技术的学习需要持之以恒，对知识的认识深度与广度都很重要。对于前端而言更是如此，近几年前端框架层出不穷，前端技术已经从单纯的静态页面开发慢慢转变成mvc、mvvc等架构型开发，前端工程师正在渐渐向全栈工程师转变，前端开发的重中之重依然是javascript脚本的理解与应用，目前正在不断深入学习javascript知识。</p>
            </div>
            <div class="skill-list-box">
                <ul>
                    <li class="J-skill-parent">
                        <div class="skill-btn">
                            <img src="img/5.png" alt="" class="a1">
                            <span class="skill-name">HTML</span>
                            <i class="skill-btn-icon"></i>
                        </div>
                        <div class="skill-item">
                            <p>· 熟练HTML/XHTML标签语意</p>
                            <p>· 深刻理解web标准</p>
                            <p>· 熟练div+css、熟悉盒模型和各类布局方式、能够根据设计图高效实现页面布局和交互效果</p>
                            <p>· 精通pc、wap页面开发</p>
                        </div>
                    </li>
                    <li class="J-skill-parent">
                        <div class="skill-btn">
                            <img src="img/6.png" alt="" class="a1">
                            <span class="skill-name">CSS</span>
                            <i class="skill-btn-icon"></i>
                        </div>
                        <div class="skill-item">
                            <p>· 熟练掌握css及css3新属性及用法、低版本IE浏览器兼容处理；</p>
                            <p>· 熟悉浏览器兼容性处理方法，熟练掌握响应式网页开发原理；</p>
                            <p>· 熟悉css3 font-face技术，制作并积累了部分常用font-face图标；</p>
                            <p>· 熟练掌握css预编译器Less及Sass技术；</p>
                            <p>· 掌握BootStrap框架，实践过响应式布局；</p>
                        </div>
                    </li>
                    <li class="J-skill-parent">
                        <div class="skill-btn">
                            <img src="img/7.png" alt="" class="a1">
                            <span class="skill-name">JS</span>
                            <i class="skill-btn-icon"></i>
                        </div>
                        <div class="skill-item">
                            <p>· 熟悉javascript，以及jquery、zepto、swiper等常见框架使用</p>
                            <p>· 熟练掌握javascript Ajax交互开发原理</p>
                            <p>· 能进行常规WEB页面特效的开发</p>
                            <p>· 正在学习vue Js框架技术</p>
                        </div>
                    </li>
                    <li class="J-skill-parent">
                        <div class="skill-btn">
                            <img src="img/8.png" alt="" class="a1">
                            <span class="skill-name">SKILL</span>
                            <i class="skill-btn-icon"></i>
                        </div>
                        <div class="skill-item cp">
                            <ul>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">HTML</span>
                                        <div class="j-1">
                                            <span style="background:rgb(128, 0, 128);width:95%;">95%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">CSS</span>
                                        <div class="j-1">
                                            <span style="background:blue;width:90%;">90%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">JaveScript</span>
                                        <div class="j-1">
                                            <span style="background:rgb(139,69,19);width:70%;">70%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟悉JavaScript编程语言</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">Jqurey</span>
                                        <div class="j-1">
                                            <span style="background:rgb(255,69,0);width:85%;">85%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟练掌握jqurey开发页面特效，提高页面开发效率；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">Vue.js</span>
                                        <div class="j-1">
                                            <span style="background:rgb(255,69,60);width:60%;">60%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>正在学习(暂无开发经验)</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">Ajax</span>
                                        <div class="j-1">
                                            <span style="background:rgb(139,0,0);width:80%;">80%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟悉JavaScript、Ajax、Jsonp、DOM等前端技术，熟练应用ajax技术与后端数据进行交互处理；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">Bootstrap</span>
                                        <div class="j-1">
                                            <span style="background:rgb(0,0,0);width:85%;">85%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟练掌握bootstrap框架及源码的使用方法；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">Swiper</span>
                                        <div class="j-1">
                                            <span style="background:#d3cb43;width:80%;">80%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>熟练使用Swiper框架开发页面动画效果，有一定开发经验；</p>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="cp-left">
                                        <span class="laber">微信小程序</span>
                                        <div class="j-1">
                                            <span style="background:#706e45;width:10%;">10%</span>
                                        </div>
                                    </div>
                                    <div class="cp-right">
                                        <p>还未学习，不过已经预习，掌握基础的内容</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</div>

<script>
    var a1 = document.querySelectorAll(".a1");
    var skill_item = document.querySelectorAll(".skill-item");
    var icon = document.querySelectorAll(".skill-btn i");
    for (let k = 0; k < a1.length ; k++){
        a1[k].addEventListener('click',function(){
            for (let t = 0 ; t < skill_item.length; t++){
                skill_item[t].style.display = "none";
                skill_item[t].style.opacity = "0";
                icon[t].style.transition = 'all 0.5s';
                icon[t].style.transform = 'rotate(0deg)';
            }
            skill_item[k].style.display = "block";
            skill_item[k].style.opacity = "1";
            icon[k].style.transform = 'rotate(180deg)';
            icon[k].style.transition = 'all 0.5s';
        })
    }
</script>
</body>
</html>